<script setup lang="ts">
import {reactive, ref} from "vue";
import {useUserStore} from "@/stores/modules/useUserStore";
import {login} from "@/api/login";
import router from "@/router";
import {ElMessage} from "element-plus";
defineOptions({
  name: "Login"
});
const userStore = useUserStore();
const user = reactive({
  username: '',
  password: ''
});
const loginRules = ref({
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'}
  ],
})

function Login() {
  login(user).then(res => {
    userStore.SET_USERINFO(res.data.data.userInfo);
    userStore.SET_TOKEN(res.data.data.token);
    userStore.$removePersistedState();
    router.replace("/")
    ElMessage({message: "登录成功", type: "success"})
  }).catch(res => {
    ElMessage({message: res.response.data.msg, type: "error"})
  })
}
</script>

<template>
  <div class="login-container">
    <el-form ref="formRef" class="login-form" auto-complete="on" :rules="loginRules">

      <div class="title-container">
        <h3 class="title">二手交易商城后台管理系统</h3>
      </div>

      <el-form-item prop="用户名">
        <el-input
            placeholder="用户名"
            type="text"
            v-model="user.username"
        />
      </el-form-item>

      <el-form-item prop="用户密码">
        <el-input
            type="password"
            placeholder="用户密码"
            v-model="user.password"
        />
      </el-form-item>

      <el-button type="primary" style="width:100%;margin-bottom:30px;" @click="Login">登录</el-button>

    </el-form>
  </div>
</template>
<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
.login-container {
  min-height: 100%;
  width: 100%;
  background-color: $bg;
  overflow: hidden;

  .login-form {
    position: relative;
    width: 520px;
    max-width: 100%;
    padding: 160px 35px 0;
    margin: 0 auto;
    overflow: hidden;
  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    line-height: 1;
    color: $dark_gray;
    width: 30px;
  }

  .title-container {
    position: relative;

    .title {
      font-size: 26px;
      color: $light_gray;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
  }
}
</style>
